<template>
  <div>
      <h1>page1</h1>
      <form @submit.prevent="page1">
        <input type="text" v-model="username" placeholder="Username" >
        <input type="password" v-model="password" placeholder="Password">
          <button type="submit">page1</button>
        </form>
      <p v-if="error">{{error}}</p>
      <p v-if="success">page1 successful!</p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: '',
      success: false
    }
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === 'admin')
      {
        this.success = true;
        this.error="";
        this.$router.push('/page2');
      }else {
        this.error='Invalid credentials';
        this.success = false;
      }
    }
  }
}
</script>

